<template>
  <div class="content">
    <div class="waitTodo" v-if="page===0">
      <h1>今日待完成任务</h1>
      <ul class="list">
        <li v-if="todoList_going.length===0">
          <p class="notic">今日任务已经全部完成啦</p>
        </li>
        <li v-for="(item,index) in todoList_going" :key="index">
          <p><span>{{ item.title }}</span><span>{{ item.time }}</span></p>
          <p><span @click="done(item.id)">完成</span><span @click="delete_item(item.id)">删除</span></p>
        </li>
      </ul>
    </div>
    <div class="Done" v-if="page === 1">
      <h1>今日已完成任务</h1>
      <ul class="list">
        <li v-for="item in todoList_done">
          <span>{{ item.title }}</span>
          <span>🚩</span>
        </li>
      </ul>
      <p class="total">你已经对自己信守承诺 <span>{{ todoList_done.length }}</span>次，加油！</p>
    </div>
    <div class="newTodo" v-if="page === 3">
      <h1>新增任务</h1>
      <ul class="list">
        <li>
          <span>设置任务</span>
          <input type="text" v-model="title" placeholder="输入任务">
        </li>
        <li>
          <span>设置时间</span>
          <input type="time" v-model="time">
        </li>
        <li>
          <button @click="add">添加</button>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
import {reactive, computed, ref} from 'vue'

export default {
  props: {
    page: {
      type: Number
    }
  },
  // data() {
  //   return {
  //     todoList: [
  //       {
  //         title: '吃饭',
  //         time: '17:48',
  //         status: false
  //       }, {
  //         title: '睡觉',
  //         time: '17:50',
  //         status: false
  //       }, {
  //         title: '打豆豆',
  //         time: '17:52',
  //         status: false
  //       }
  //     ]
  //   }
  // },
  setup() {
    const title = ref('')
    const time = ref('')

    let todoList = reactive([{
      title: '吃饭',
      time: '17:48',
      status: false,
      id: 1
    }, {
      title: '睡觉',
      time: '17:50',
      status: false,
      id: 2,
    }, {
      title: '打豆豆',
      time: '17:52',
      status: false,
      id: 3
    }])

    const todoList_going = computed(() => {
      return todoList.filter(item => item.status === false)
    })
    const todoList_done = computed(() => {
      return todoList.filter(item => item.status === true)
    })
    const done = (id) => {
      todoList.forEach(item => {
        if (item.id === id) {
          item.status = true
        }
      })
    }

    const delete_item = id => {
      todoList.forEach((item, index) => {
        if (item.id === id) {
          todoList.splice(index, 1)
        }
      })
    }

    const add = () => {
      if (title.value === '' || time.value === '') {
        return false
      } else {
        todoList.push({
          title: title.value, time: time.value, status: false
        })
        title.value = ''
        time.value = ''
      }
    }

    return { todoList_going, todoList_done, done, delete_item, add, title, time }
  }
}
</script>

<style lang="scss" scoped>
@import "styles/main.scss";

.content {
  padding: 40px 0;

  .list {
    list-style: none;
    margin-top: 30px;

    .notic {
      font-size: 22px;
      margin: auto;
      color: $basic-color;
    }

    li {
      width: 70%;
      margin: 15px auto;
      @include flex(row, space-between);
      align-items: center;
      font-size: 20px;

      p {
        &:nth-of-type(1) {
          span {
            color: #2c3e50;
            margin-right: 15px;
            cursor: default;
          }
        }

        &:nth-of-type(2) {
          span {
            margin: 0 10px;
            font-size: 14px;
            color: #53CFFF;
            cursor: pointer;
          }
        }
      }

    }
  }

  .total {
    font-size: 14px;

    span {
      color: $basic-color;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: .2rem;
    }
  }

  .waitTodo, .Done, .newTodo {
    width: 80%;
    margin: auto;
  }

  .newTodo {
    .list {
      li {
        display: block;
        text-align: left;

        span {
          margin-right: 20px;
        }

        input {
          height: 26px;
          padding: 0 5px;
          border: none;
          outline: 1px solid $basic-color;
        }

        button {
          height: 35px;
          width: 80px;
          border: none;
          border-radius: 13px;
          float: left;
          background: $basic-color;
          font-size: 14px;
          color: white;
          cursor: pointer;
        }
      }
    }

  }
}
</style>